<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<style type="text/css">
#operationReport table td{
	/* border: 1px solid #454545; */
	text-align: center;
	height: 50px;
	font-size: 14px;
	width: 16%
}
#operationReport h2{
	/* border: 1px solid #454545; */
	text-align: center;
	margin-bottom: 30px;
}
.battery-info {
	margin-left:0px;
	width: 99%;
} 
 .my-title {
 	float: left;
 	display: block;
	font-size: 16px;
	margin: 0 50px 10px 2px ;
}
.title-last {
	float: right;
	margin-right: 20px; 
}
.title {
	width: 99%;
	overflow: hidden;
}

</style>
<div class="container-fluid" >
	<div class="row-fluid">
		<div class="span12">
			<ul class="breadcrumb">
				<li><span class="c-999">运营售后管理<i
					class="icon-angle-right"></i></span>
				</li>
				<li><a class="c-666" onclick="util.showContent('pages/system/operationReport.jsp')">运营报告</a></li>
			</ul>
		</div>
	</div>
	
	<div class="search-box" style="width: 99%;">
		<div class="search-title">
			<span class="search-criteria c-666">&nbsp;查询条件</span>
		</div>
		<form id="customer_search_form">
			<table class="search-body" border="0" cellpadding="0" cellspacing="0" width="100%">
				<tr>
					<td>
						
						<label class="my-label">客户名称:</label>
						<select id="id_customer" type="text" class="my-select enterSearch" style="overflow: hidden; text-overflow:ellipsis; white-space: nowrap;width:210px">
							<option value="">全部</option>
						</select>
						
						<label class="my-label" style="margin-top:20px">开始时间:</label>
						<input id="gatherTime_start" class="data-picker Wdate enterSearch" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d'})"/>

						<label class="my-label">结束时间:</label>
						<input id="gatherTime_end" class="data-picker Wdate enterSearch" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d'})"/>
						<select id="shortcut_time"  class="my-select enterSearch">
							<option value="5">快捷时间</option>
                            <option value="0">昨天</option>
                            <option value="1">上周</option>
                            <option value="2">上月</option>
                            <option value="3">上季度</option>
                            <option value="4">去年</option>
                        </select>
					</td>
				</tr>
			</table>
		</form>
		<ul class="search-button">
			<li><button class="btn blue" id="btn_query">查&nbsp;&nbsp;询</button></li>
			<li><button class="btn blue" id="btn_reset">重&nbsp;&nbsp;置</button></li>
			<li><button class="btn blue" id="btn_download">下载报告</button></li>
		</ul>
	</div>
	<div id="operationReport" >
	<h2 style="font-weight:300;font-size: 30px;">青岛力神动力电池远程监控平台运营分析报告</h2>
	<div class="title">
	<span class="my-title" id="reportDate">报告时间：2017年10月</span>
	<span class="my-title" id="reportCreateDate">报告生成日期：2017年10月</span>
	<span class="my-title title-last" id="reportUser">报告申请人：</span>
	</div>
	

	<div class="table-con" style="margin-bottom: 25px;width: 99%;">
		<div class="table-head">
			&nbsp;&nbsp;&nbsp; <i class="icon-bar-chart"></i>
			&nbsp;电池基本信息统计
		</div>
		<div class="list-body" style="overflow:hidden">
			<table style="width: 100%">
				<tr>
					<td>所属客户</td>
					<td>电池总数</td>
					<td>电池上电总数</td>
					<td>电池充电总次数</td>
					<td>累计报警总数</td>
					<td>累计运行时间</td>
				</tr>
				<tr>
					<td id="customerName">全部</td>
					<td id="batteryNum">0</td>
					<td id="onPowerNum">0</td>
					<td id="chargeNum">0</td>
					<td id="totalAlertNum">0</td>
					<td id="totalRunTime">0</td>
				</tr>
			</table>
		</div>
	</div>

	<div class="table-con" style="margin-bottom: 25px;width: 99%;">
		<div class="table-head">
			&nbsp;&nbsp;&nbsp; <i class="icon-bar-chart"></i>
			&nbsp;电池告警分析统计
		</div>
		<div class="list-body" style="overflow:hidden">
			<div class="table-responsive"  id="test">
				<div id="battery_alert_chart_div" style="width:45%;height:380px;float:left"></div>
				<div id="battery_alert_chart_div2" style="width:50%;height:380px;float:left;margin-left:50px"></div>
			</div>
		</div>
	</div>

	<div class="table-con" style="margin-bottom: 25px;width: 99%;">
		<div class="table-head">
			&nbsp;&nbsp;&nbsp; <i class="icon-bar-chart"></i>
			&nbsp;售后服务数据分析
		</div>
		<div class="list-body" style="overflow:hidden">
			<div class="table-responsive"  id="test">
				<div id="service_chart_div" style="width:45%;height:380px;float:left"></div>
				<div id="service_chart_div2" style="width:50%;height:380px;float:left;margin-left:50px"></div>
			</div>
		</div>
	</div>
	</div>
	
</div>
	
<!-- 模态窗口 str -->
<jsp:include page="/pages/common/modal.jsp"></jsp:include>
<script type="text/javascript" src="pages/system/js/DateUtil.js"></script>
<script type="text/javascript" src="script/echarts/js/macarons.js"></script>
<!-- <script type="text/javascript" src="script/echarts/js/echarts-all.js"></script> -->
<script type="text/javascript" src="script/jsPdf/html2canvas.js"></script>
<script type="text/javascript" src="script/jsPdf/jsPdf.debug.js"></script>
<script type="text/javascript" src="pages/system/js/operationReport.js"></script>
<script src="media/js/ui-modals.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function() {
		operationReport.init();
		UIModals.init();
	});
</script>


